<template>
    <div>
        <cvue-dialog
            :dialogVisible="groupVisible"
            title="人员分组"
            :isShowFoot="false"
            @handleOpen="openDialog"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div  slot="dialogBody">
                <div class="left-con">
                    <el-tree
                        :props="{
                            children: 'children',
                            label: 'groupName'
                        }"
                        :data="groupTree"
                        :default-expand-all="true"
                        :expand-on-click-node="false"
                        :highlight-current="true"
                        @node-click="nodeClick"
                        >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span>
                            <el-button v-if="node.level == 1"
                                type="text"
                                size="mini"
                                @click.stop="appendGroup(data)">
                                添加
                            </el-button>
                            <el-button v-if="node.level == 2 && data.id > 0"
                                type="text"
                                size="mini"
                                @click.stop="removeGroup(node, data)">
                                删除
                            </el-button>
                            </span>
                        </span>
                    </el-tree>
                </div>
                <div class="right-con">
                     <el-table
                        ref="groupTable"
                        :data="stubedList"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="selectionChange"
                        @row-click="rowClick"
                        >
                        <el-table-column
                        type="selection"
                        width="55">
                        </el-table-column>
                        <el-table-column
                        label="姓名"
                        prop="studentName"
                        width="120">
                     
                        </el-table-column>
                        <el-table-column
                        prop="roomName"
                        label="房间"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        label="班级" >
                        <template slot-scope="{ row }">
                            <span>{{row.gradeName}}{{row.className}}</span>
                        </template>
                        </el-table-column>
                         <el-table-column
                        label="操作" >
                          <template slot-scope="{ row }">

                              <el-button v-if="groupId > 0" @click.stop="studentGroupRemove(row)" type="text" >移除</el-button>
                          </template>
                          
                        </el-table-column>
                    </el-table>

                    <el-pagination  v-show="total > 0"
                    style="margin:20px 0 0 0;"
                    background
                    layout="prev, pager, next"
                    :page-size='PageSize'
                    :current-page='PageNum'
                    :total="total"
                    @current-change='currentChange'>
                    </el-pagination>
                    <el-form v-show="total > 0" ref="form"  label-width="120px" style="margin:20px 0 0 0;">
                        <el-form-item label="选择人员加入" :required="true">
                            <el-select v-model="group"  placeholder="请选择分组" value-key="id">
                            <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item"></el-option>
                          
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button @click="studentGroupAdd" type="primary" >确定</el-button>
                            <!-- <el-button>关闭</el-button> -->
                        </el-form-item>
                    </el-form>
                </div>
                <div class="clear">
                    
                </div>
            </div>
        </cvue-dialog>

    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
export default {
    components: {
        cvueDialog
    },
    computed: {
        groupVisible () {
            return this.$store.state.dorm.groupVisible
        },
         wifiSelection () {
            return this.$store.state.dorm.wifiSelection
        },
         adminerSelection () {
            return this.$store.state.dorm.adminerSelection
        },
        curDorm () {
          return this.$store.state.dorm.curDorm
        },
        groupTree () {
          return this.$store.state.group.groupTree
        },
        schoolId () {
          return this.$store.state.common.cookiesObj.schoolId
        },
        total () {
          return this.$store.state.group.total
        },
        PageNum () {
           return this.$store.state.group.PageNum
        },
        PageSize () {
           return this.$store.state.group.PageSize
        },
        stubedList () {
          return this.$store.state.group.stubedList
        },
        groupList () {
          if (this.groupTree.length == 0) {
            return []
          } else {
             return this.groupTree[0].children
          }
        }
    },
    data () {
        return {
          group: '',
          selectedList: [],
          groupId: 0
        }
    },
    methods: {
       
        openDialog () {
            var params = {
              DormitoryId: this.curDorm.id,
              SchoolId: this.schoolId,
              PageNum: 1,
              PageSize: 300
            }
          
            this.$store.dispatch('group/getGroupList', params)
           this.getList(1, 0)
        },
        confirmDialog () {
             this.closeDialog()
        },
        closeDialog () {
            this.$store.state.dorm.groupVisible = false
        },
        appendGroup (data) {
          this.$store.state.group.addGroupVisible = true
        },
        removeGroup (node, data) {
           this.$confirm('确定 ‘' + data.groupName + '’ 删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.$store.dispatch('group/deleteGroup', data.id).then(() => {
                  this.$message.success('删除成功')
                })
            })
        },
        currentChange (val) {
           this.getList(val, this.groupId)
        },
        selectionChange (val) {
          this.selectedList = val
        },
        nodeClick (data, node) {
          if (node.level == 2) {
              this.getList(1, data.id)
          }
        },
        rowClick (row, column) {
          this.$refs.groupTable.toggleRowSelection(row)
        },
        getList (pageNum, groupId) {
          this.groupId = groupId
          // if (groupId > 0) {
          //     this.$store.dispatch('group/studentGroup', {
          //       GroupId: groupId,
          //       PageNum: pageNum
          //     })
          // } else {
          //      this.$store.dispatch('group/getStubed', {PageNum: pageNum})
          // }

           this.$store.dispatch('group/studentGroup', {
                GroupId: groupId,
                PageNum: pageNum,
                 DormitoryId: this.curDorm.id,
                 SchoolId: this.schoolId
              })
        },
        studentGroupAdd () {
          if (this.selectedList.length == 0) {
            this.$message.error('请选择学生')
            return
          }
          if (!this.group) {
            this.$message.error('请下拉选择分组')
            return
          }
          var params = {
            groupId: this.group.id,
            groupList: this.selectedList.map(obj => {
              return {
                studentId: obj.studentId,
                roomId: obj.roomId
              }
            })
          }
          this.$store.dispatch('group/studentGroupAdd', params).then(() => {
            this.$message.success('添加成功')
            this.$refs.groupTable.clearSelection()
            this.selectedList = []
            this.group = ''
          })
        },
        studentGroupRemove (item) {
          var params = {
            groupId: this.groupId,
            groupList: [
              {
                studentId: item.studentId,
                roomId: item.roomId
              }
            ]
          }
          this.$store.dispatch('group/studentGroupRemove', params).then(() => {
            this.$message.success('移除成功')
            this.getList(this.PageNum, this.groupId)
          })
        }
    }
}
</script>
<style scoped>
.left-con{float: left;width: 30%;}
.right-con{float: left;width: 65%;border-left: 1px solid #efefef;padding: 0 0 0 10px;}
.clear{clear: both;}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
